<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>拖车费管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form-model layout="inline" :model="form">
        <a-form-model-item label="起运港口">
          <a-input v-model="form.protName" />
        </a-form-model-item>
        <a-form-model-item label="门点地址">
          <a-cascader
            :options="options"
            :fieldNames="{label: 'area', value: 'area', children: 'childList'}"
            placeholder="省/市/区县"
            @change="onChange"
          />
        </a-form-model-item>
        <a-form-model-item>
          <a-input placeholder="门点详细地址" v-model="form.address" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="plus">+ 创建拖车费</a-button>
        </a-form-model-item>
      </a-form-model>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        :style="'margin-top: 25px;'"
        :pagination="pagination"
        :row-key="record => record.id"
      >
        <template slot="do" slot-scope="record">
          <a @click="edit(record)" style="margin-right:5px">编辑</a>
          <a @click="click(record)" style="margin-right:5px">查看</a>
          <a @click="del(record)">删除</a>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import { queryBaseAreaList } from '@/api'
import { queryTruckDistanceList, deleteTruckDistance } from '@/api/landCenter'

const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '起运港口',
    dataIndex: 'protName'
  },
  {
    title: '省/市/区',
    customRender: (text, record, index) => {
      return `${record.province}/${record.city}/${record.area}`
    }
  },
  {
    title: '门点详细地址',
    customRender: (text, record, index) => {
      return record.address ? record.address : '--'
    }
  },
  {
    title: '操作',
    width: '150px',
    key: 'do',
    scopedSlots: {
      customRender: 'do'
    }
  }
]
export default {
  data () {
    return {
      form: {
        protName: '',
        province: '',
        city: '',
        area: '',
        address: ''
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      pagination: {},
      options: []
    }
  },
  methods: {
    queryAddress () {
      queryBaseAreaList({})
        .then(res => {
          // // console.log(res.data)
          this.options = res.data
        })
        .catch(rs => {})
    },
    queryTruckList (paramData) {
      this.loading = true
      queryTruckDistanceList(paramData)
        .then(res => {
          // // console.log(res.data)
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.queryTruckList(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.queryTruckList(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    deleteTruck (e) {
      let _this = this
      deleteTruckDistance(e)
        .then(res => {
          if (res.code === 0) {
            _this.$message.success('删除成功')
            _this.pageNum = 1
            _this.pageSize = 10
            setTimeout(() => {
              _this.queryTruckList({
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }, 800)
            })
          }
        })
        .catch(rs => {})
    },
    check () {
      this.pageNum = 1
      this.pageSize = 10
      let paramData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        ...this.form
      }
      // // console.log(paramData)
      this.queryTruckList(paramData)
    },
    plus () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      this.$router.push({ path: 'trailerFeeManagement/create' })
    },
    onChange (value, selectedOptions) {
      // // console.log(value)
      // // console.log(selectedOptions)
      this.form.province = value[0]
      this.form.city = value[1]
      this.form.area = value[2]
    },
    edit (e) {
      if (!this.$root._bc.edit) {
        this.$message.error('您无此权限！')
        return
      }
      this.$router.push({ path: `trailerFeeManagement/edit/${e.id}` })
    },
    click (e) {
      this.$router.push({ path: `trailerFeeManagement/detail/${e.id}` })
    },
    del (e) {
      if (!this.$root._bc.drop) {
        this.$message.error('您无此权限！')
        return
      }
      let _this = this
      _this.$confirm({
        title: '确定删除吗？',
        onOk () {
          _this.deleteTruck({
            'distanceId': e.id
          })
        },
        onCancel () {}
      })
    }
  },
  mounted () {
    this.queryTruckList({
      pageSize: this.pageSize,
      pageNum: this.pageNum
    })
    this.queryAddress()
  }
}
</script>
<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
}
</style>
